<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .canvas {
        border: 1px solid #ccc;
        cursor: crosshair;
    }
</style>

<body>
    <input type="button" value="重放" id="btn1">
    <input type="button" value="清空" id="btn2">
    <br>
    <canvas id="cvs" class="canvas"></canvas>
</body>
<script>
    class Draw {
        //   三个参数定时器，宽，高
        constructor(selector, width, height) {
            this.element = document.querySelector(selector)
            this.canvas = this.element.getContext('2d')
            this.element.width = width
            this.element.height = height
            this.timeId = null
            this.animateArr = []
        }
        init() {
            const { canvas: c, element: el } = this
            let isDrag = false
            c.lineWidth = 2
            c.lineJoin = 'round'
            c.shadowColor = '#000'
            c.shadowBlur = 4
            el.onmousedown = () => {
                isDrag = true
                c.beginPath()
            }
            el.onmousemove = (e) => {
                if (isDrag) {
                    const x = e.pageX - el.offsetLeft
                    const y = e.pageY - el.offsetTop
                    c.lineTo(x, y)
                    c.stroke()
                    this.animateArr.push([x, y])
                }
            }
            el.onmouseup = () => {
                isDrag = false
                this.animateArr.push(-1)
            }
            el.onmouseout = () => {
                el.onmouseup()
            }

        }
        animateGo() {
            const { canvas: c } = this
            this.clear()
            c.beginPath()
            const loop = (animate, i) => {
                if (i < animate.length - 1) {
                    const arr = animate[i]
                    if (arr === -1) {
                        c.beginPath()

                    } else {
                        c.lineTo(arr[0], arr[1])
                        c.stroke()
                    }
                    i++
                    this.timeId = setTimeout(() => {
                        loop(animate, i)
                    }, 10)
                }
            }
            loop(this.animateArr, 0)
        }
        clear() {
            const { canvas: c } = this
            const { width, height } = this.element
            c.clearRect(0, 0, width, height)
        }
    }
    const g = new Draw('#cvs', 1000, 500)
    g.init()
    //   重写事件
    document.getElementById('btn1').onclick = () => {
        g.animateGo()
    }
    //   清空事件
    document.getElementById('btn2').onclick = () => {
        g.clear()
        g.animateArr = []
    }

</script>

</html>